<template>
  <div>
    <div class="swipet">
      <div class="details_path" @click="goto('/list')">
        <img src="../assets/icon/left-arrow.png" alt />
      </div>
      <van-swipe :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in Details" :key="index">
          <img class="my_swipe_banner" :src="item.pic" alt />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="Item_title">
      <p>{{item.name}}</p>
      <p style="font-size:14px">{{item.characteristic}}</p>
      <p class="Item_flex" style="font-size:14px">
        <span>
          最低价
          <span style="font-size:18px;color:red">￥{{item.minPrice}}</span>
        </span>
        <span>原价￥{{item.originalPrice}}</span>
        <span>限量{{item.stores}}件</span>
      </p>
    </div>

      <div class="evaluate" v-html="content"></div>




  </div>
</template>

<script>
export default {
  computed: {
    Details: function () {
      return this.$store.state.Details.pics;
    },
    item: function () {
      return this.$store.state.Details.basicInfo;
    },
    content:function(){
      return this.$store.state.Details.content;
    }
  },
  methods: {
    goto(path) {
      this.$router.push(path);
    },
  },
  mounted(){
    console.log(this.content)
  }
};
</script>

<style scoped>
.swipet {
  width: 100%;
  height: 70vh;
}
.my_swipe_banner {
  width: 100%;
  height: 70vh;
}
.details_path {
  width: 20px;
  height: 20px;
  /* padding: 6px; */
  border-radius: 50%;
  border: 1px solid #ffffff;
  position: fixed;
  left: 10px;
  top: 10px;
  text-align: center;
  line-height: 20px;
  z-index: 123;
}
.details_path img {
  margin-top: 2px;
}
.Item_title {
  width: 90%;
  margin: 0 auto;
}
.Item_title p {
  margin: 8px 0px;
}
.Item_flex {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: flex-end;
}
.evaluate>>>img{
  width: 100% !important;
  height: 100% !important;
}
</style>